<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./star.css">
</head>

<body>
    <div class=total>
        <div class="num" style="width: 0px;"></div>
    </div>
    <button>重新开始</button>
    <script src="./star.js"></script>
</body>

</html>





<!-- <script>
    //封装 随机 下面调用
    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }
    //定时器函数
    t2 = setInterval(function () {
        var imgObj = document.createElement('img') //造图片
        imgObj.src = './star.gif' //图片属性来源src
        imgObj.width = random(20, 100) //图片宽度 随机20-100
        imgObj.height = random(20, 100)

        imgObj.style.position = 'absolute' //图片定位
        //最大宽度
        var maxLeft = innerWidth || document.documentElement.clientWidth - imgObj.width
        var min = 0
        //拼接 随机宽度+px
        imgObj.style.left = random(0, maxLeft) + 'px'
        var maxTop = innerHeight || document.documentElement.clientHeight - imgObj.height
        var min = 0
        imgObj.style.top = random(0, maxTop) + 'px'
        //追加到body里面
        document.body.appendChild(imgObj)
    }, 1000)

    //给body添加点击事件
    document.querySelector('body').onclick = function (evt) {
        var e = evt || window.event
        //2事件处理函数中 判断是否是IMG标签
        //3事件处理函数中 是就删除
        if (e.target.nodeName == 'IMG') {
            //操作标签
            this.removeChild(e.target)
            //获取血条num
            var numObj = document.querySelector('.num')
            //获取血条的宽度
            var numWidth = parseInt(numObj.style.width)
            //消灭一个星星 每次减5 不到在大长度 就一直可以玩
            numWidth -= 5
            numObj.style.width = numWidth + 'px'
            //如果血条长度等于0
            if (numWidth < 0) {
                //血条从0开始
                numWidth = 0
                numObj.style.width = numWidth + 'px'
            }
        }
    }
    //定时器函数
    t1 = setInterval(function () {
        //  获取num宽度
        var num = parseInt(document.querySelector('.num').style.width)
        //每次+5
        num += 5
        document.querySelector('.num').style.width = num + 'px'
        //  判断 加到头200结束游戏
        if (num == 200) {
            clearInterval(t1)
            clearInterval(t2)
            alert('Game over')
        }
    }, 1000)
    //获取butto你按钮 
    var btnObj = document.querySelector('button')
    //绑定点检事件
    btnObj.onclick = function () {
        //事件处理中
        var num = document.querySelector('.num')
        //点击 清空 重新玩
        num.style.width = '0px'
        var num = parseInt(num.style.width)
    }
</script> -->